<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="100px" :rules="rules">
      <el-form-item label="学习程度：" prop="level" required>
        <el-radio-group v-model="form.level">
          <el-radio
            v-for="item in website.knowledgeLevelLists"
            :key="item.value"
            :value="item.value"
            :label="item.value"
          >
          {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="密级：" prop="security" required>
        <el-radio-group v-model="form.security">
          <el-radio
            v-for="item in website.securityLists"
            :key="item.value"
            :value="item.value"
            :label="item.value"
          >
          {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干：" prop="title" required>
        <el-input v-model="form.title" @click="inputClick(form, 'title', '题干')" />
      </el-form-item>
      <el-form-item label="正确答案：" prop="answer" required>
        <el-radio-group v-model="form.answer">
          <el-radio v-for="item in form.content" :key="item.prefix" :label="item.content"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="解析：" >
        <el-input v-model="form.analysis" @click="inputClick(form, 'analysis', '解析')" />
      </el-form-item>
      <el-form-item label="分数：" prop="score" required>
        <el-input-number v-model="form.score" :precision="1" :step="1" :max="100" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" v-if="!updateId">提交</el-button>
        <el-button type="primary" @click="upDateForm" v-else>更新</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="$emit('openView')">预览</el-button>
      </el-form-item>
    </el-form>
    <el-dialog v-model="richEditor.dialogVisible" center :fullscreen="true" :title="title">
      <avue-ueditor v-model="text" v-bind="options"></avue-ueditor>
      <el-button type="primary" @click="editorConfirm" class="mt10">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    form: Object,
    rules: Object,
    updateId: String,
  },
  data() {
    return {
      richEditor: {
        dialogVisible: false,
        object: null,
        parameterName: '',
        instance: null,
      },
      title: '',
      text: '',
      options: {
        action: '/blade-resource/oss/endpoint/put-file-attach-no-encrypt',
        customConfig: {
          uploadFileName: 'file', 
        },
        propsHttp: {
          home: this.baseHost + '/blade-resource/oss/endpoint/viewFile/',
          res: 'data', 
          url: 'attachId', 
        },
      },
    };
  },
  created() {},
  methods: {
    inputClick(object, parameterName, title) {
      this.text = this.form[parameterName];
      this.richEditor.object = object;
      this.richEditor.parameterName = parameterName;
      this.richEditor.dialogVisible = true;
      this.title = title;
    },
    editorConfirm() {
      this.richEditor.dialogVisible = false;
      this.form[this.richEditor.parameterName] = this.text;
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('addQuestions', this.form);
          this.richEditor.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    upDateForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('updateQuestions', this.form);
          this.richEditor.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['form'].resetFields();
    },
  },
};
</script>
